import React from "react"
import WeUI from 'react-weui'
import IconHome from '../assets/images/home.png'
import IconUser from '../assets/images/user.png'
import { useNavigate } from 'react-router-dom'
import BDBookItem from '../components/BDBookItem'
import '../style/style.css'

const {
    Tab: WTab,
    TabBody,
    TabBar,
    TabBarItem,
    Panel,
    PanelBody,
    SearchBar
} = WeUI

const Tab = () => {
    let items = [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6]
    const navigate = new useNavigate()
    const gotoUser =() => {
        navigate('/user')
        // console.log('++++++++++')
    }
    return (
        <div >
            <WTab>
                <TabBody>
                    <Panel>
                        <PanelBody>
                            <SearchBar placeholder="请输入您要查找的图书" lang={{cancel: '取消'}} />
                            {
                                items.map((item, i) => {
                                    return (
                                        <BDBookItem key={i}/>
                                    )
                                })
                            }
                        </PanelBody>
                    </Panel>
                </TabBody>
                <TabBar>
                    <TabBarItem  active={true} icon={<img src={IconHome}/>} label="书单" />
                    <TabBarItem  onClick={gotoUser} active={false} icon={<img src={IconUser}/>} label="我" />
                </TabBar>
            </WTab>
        </div>
        
    )
}

export default Tab